<!DOCTYPE html>
<?php session_start(); ?>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script language="javascript" type="text/javascript">
        function verificarClaves() {
            var pass1 = document.getElementById("pass1").value;
            var pass2 = document.getElementById("pass2").value;
            
            if(pass1 != null && pass2 != null && pass1 != "" && pass2 != ""){
                if (pass1 == pass2){
                    document.getElementById("iguales").style.display  = "block";
                    document.getElementById("noiguales").style.display  = "none";
                    if (pass1.length < 8){
                        document.getElementById("caracteres").style.display  = "block";

                    }else{
                        document.getElementById("caracteres").style.display  = "none";
                    }
                }else{
                    document.getElementById("iguales").style.display  = "none";
                    document.getElementById("noiguales").style.display  = "block";
                }
            }

        }

        function validarPassword() {
            
            var pass1 = document.getElementById("pass1").value;
            var pass2 = document.getElementById("pass2").value;
            
            if (pass1 == pass2 && pass1.length >= 8) {
               return true;
            }else{
                return false;
            }
        }
        
        function enviarDatos() {
            if (validarPassword()) {
                document.formulario.submit();
            }
        }
		
		function alCargar(){
			var error = <?php	if(isset($_GET['mensajeError'])){
									echo json_encode($_GET['mensajeError']);
								}
								else{
									echo json_encode('1');
								}
							?>;
							
			if(error == 0){
				document.getElementById("lblerror").style.visibility = "visible";
			}else{
				document.getElementById("lblerror").style.visibility = "hidden";
			}
			
		}
		
        
    </script>
    <body onLoad="alCargar();">
        <h1>Ingresar Usuario</h1>
        <form  method="post" name="formulario" action="../events/EventSignUp.php" autocomplete="off">
        <table>
            <tr>
                <td>Nombre: </td>
                <td><input type="text" style="text-transform: uppercase;" required id="nombreusuario" name="nombreusuario" ></td>
            </tr>
            <tr>
                <td>Apellido: </td>
                <td><input type="text" style="text-transform: uppercase;" required id="apellidousuario" name="apellidousuario" ></td>
            </tr>
            <tr>
                <td>Usuario: </td>
                <td><input type="text" required id="nickusuario" name="nickusuario" ></td>
            </tr>
            <tr>
                <td>Password: </td>
                <td><input type="password" required id="pass1" name="pass1" onkeyup="verificarClaves();" ></td>
                <td><label id="noiguales" style="display: none"><font color="red">Las claves no coinciden</font></label>
                    <label id="iguales" style="display: none"><font color="green">Las claves coinciden</font></label>
                    <label id="caracteres" style="display: none"><font color="red">Las claves es menor a 8 caracteres.</font></label></td>
            </tr>
            <tr>
                <td>Confirmar Password: </td>
                <td><input type="password" required id="pass2" name="pass2" onkeyup="verificarClaves();"  ></td>
            </tr>
            <tr>
                <td>Rol: </td>
                <td><select id="roles" name="roles" required>
                <option value="1">Administrador</option>
                <option value="2">Medico</option>
                <option value="3">Asistente</option>
                </select></td>
            </tr>
        </table>
        <input type="button" id="bttnenviar" name="bttnenviar" value="Enviar" onclick="enviarDatos();">
        <br>
        <label id="lblerror" style="visibility:hidden"><font color="red">ERROR AL INGRESAR USUARIO</font></label>
    </form>
    <form method="post" name="formulario2" action="../events/EventSignUp.php">
    	<br>
    	<input type="submit" id="bttnvolver" name="bttnvolver" value="Volver">
    </form>
    </body>
</html>
